<template>
	<view @click="cancelSearch">
		<view class="mt-1 px-1">
			<uni-easyinput prefixIcon="search" v-model.trim="keyvalue" placeholder="请输入搜索内容" @iconClick="iconClick">
			</uni-easyinput>
		</view>
		<one-adv title="热门搜索" cover="../../static/images/demo/demo4.jpg">
			<color-tag v-for="(item,index) in hot" :key="index" :item="item" :color="true" @click="tagClick(item)"></color-tag>
		</one-adv>
		<one-adv title="常用分类">
			<color-tag v-for="(item,index) in cate" :key="index" :item="item" :color="false" @click="tagClick(item)"></color-tag>
		</one-adv>
		<one-adv title="历史记录" cover="../../static/images/demo/del.png" :del="false" @delContent="delCon">
			<color-tag v-for="(item,h) in historyList" :key="h" :item="{name:item}" :color="false" @click="tagClick(item)" @longpress="longpress(h)">
				  <icon type="clear" size="14" class="position-absolute uni-icon" v-show="isShow&&currentIndex==h" @click.stop="removeStorage(h)"/>
			</color-tag>
		</one-adv>
	</view>
</template>

<script setup>
	import { ref, reactive, toRefs, onMounted } from 'vue'
	var keyvalue = ref('')
	var isShow = ref(false)
	var currentIndex = ref(0)
	var hot = ref([{
		name: '领券中心'
	},
	{
		name: 'Redmi K20'
	},
	{
		name: 'RedmiBook 14'
	},
	{
		name: '智能积木 越野四驱车'
	},
	{
		name: '手环 腕带'
	},
	])
	var cate = ref([{

		name: '耳机'
	},
	{
		name: '手机'
	},
	{
		name: '音箱'
	},
	{
		name: '手表'
	},
	{
		name: '配件'
	},
	{
		name: '网关/传感器'
	},
	{
		name: '健康'
	},
	{
		name: '酷玩'
	},
	])
	var historyList = ref([])
	const iconClick = () => {
		console.log('点击了左侧图标');
		if (keyvalue.value == '') {
			uni.showToast({
				title: '请输入搜索内容',
				icon: 'none'
			})
			return;
		} else {
            let index = historyList.value.indexOf(keyvalue.value)
			console.log('index',index);
			if(index == -1){
				 historyList.value.unshift(keyvalue.value)
				 uni.setStorageSync('history_key',historyList.value);
			}else {
				historyList.value.splice(index,1)
				historyList.value.unshift(keyvalue.value)
				 uni.setStorageSync('history_key',historyList.value);
			}
			uni.navigateTo({
				url:`/pages/choose/choose?key=${keyvalue.value}`
			})
		}
	}
	const cancelSearch = ()=>{
		isShow.value = false
	}
	//删除全部历史记录
	const delCon = ()=>{
		uni.showModal({
			title: '提示',
			content: '您确定要全部删除吗',
			success:  (res)=> {
				if (res.confirm) {
					uni.removeStorageSync('history_key');
					historyList.value = []
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	}
	//删除单个历史记录
	const removeStorage = (i)=>{
		historyList.value.splice(i,1)
		uni.setStorageSync('history_key',historyList.value);
		isShow.value = false
	}
	//点击按钮输入到文本框
	const tagClick = (item)=>{
		if(item.name){
			keyvalue.value = item.name
		}else {
			keyvalue.value = item
		}
		
	}
	//长按
	const longpress = (index)=>{
		currentIndex.value = index
		isShow.value = true
	}
	onMounted(()=>{
		let history = uni.getStorageSync('history_key');
		if(history){
			historyList.value = history
		}
	})
</script>
<style scoped lang="scss">
	.uni-icon {
		top:0;
		right:0;
	}
</style>